<template>
	<view class="qiun-columns">
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">工单类型占比</view>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
		</view>
	</view>
</template>

<script>
	import uCharts from './u-charts/u-charts.js';
	var canvaRing = null;

	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				canvaRing: null
			}
		},
		mounted() {
			console.log('ring mounted')
		
			// console.log(this.typeCount, '类型')
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			// this.getServerData();
		},
		// onLoad() {
		// 	this = this;
		// 	this.cWidth = uni.upx2px(750);
		// 	this.cHeight = uni.upx2px(500);
		// 	this.getServerData();
		// },
		methods: {
			toJSON() {},
			getServerData(typeCount) {
				console.log(typeCount)
				let Ring = {
					series: []
				}
				this.$type.ticketTypeList.forEach(
					x => {
						let item = {
							"name":x.type,
							"data": typeCount[x.type],
							"legendShape": "rect",
							textColor: x.color
						}
						Ring.series.push(item)
					}
				)
				Ring.series.textColor = '#5094FF'
				Ring.series.legendShape = 'rect';
				this.showRing("canvasRing", Ring);
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				// Ring.series = res.data.Ring.series;
			},
			showRing(canvasId, chartData) {
				canvaRing = new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					legend: {
						position: 'right',
						lineHeight: 20,
						fontColor: '#333333'
					},
					colors: ['#5094FF', '#FF9189', '#FFC189', '#FFE49A', '#97E057', '#57E0C5', '#7D77EF', '#FE40B0', '#EA5EFF'],
					title: {
						name: '100%',
						color: '#333333',
						fontSize: 20 * this.pixelRatio,
						offsetY: -5 * this.pixelRatio,
					},
					subtitle: {
						name: '类型占比',
						color: '#333333',
						fontSize: 15 * this.pixelRatio,
						offsetY: -5 * this.pixelRatio,
					},
					extra: {
						pie: {
							offsetAngle: -45,
							ringWidth: 24 * this.pixelRatio,
							labelWidth: 15
						}
					},
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					series: chartData.series,
					animation: true,
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					disablePieStroke: true,
					dataLabel: true,
				});
				this.canvaRing = canvaRing
			},
			touchRing(e) {
				canvaRing.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 100%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		/* border-left: 10upx solid #0ea391; */
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000;

		&:before {
			content: "";
			display: inline-block;
			position: relative;
			top: 4rpx;
			left: 0px;
			width: 16rpx;
			height: 16rpx;
			box-sizing: content-box;
			border: 8rpx solid #1152FC;
			border-radius: 50%;
			background-color: #fff;
			margin-right: 6rpx;
		}
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
